<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane>
        <span slot="label"> 所有退款申请</span>
        <order-refund-table need-ctrl>
          <template slot="ctrl" slot-scope="scope">
            <el-button type="success"
                       @click="toRefund(scope.info)"
                       plain
                       size="mini">同意退款
            </el-button>
            <!--            <el-button-->
            <!--                type="danger"-->
            <!--                size="mini"-->
            <!--                @click="handleRefuseRefund(scope.info)"-->
            <!--                plain-->
            <!--            >拒绝退款-->
            <!--            </el-button>-->
          </template>
        </order-refund-table>


      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"> 商品退款申请</span>
        <order-refund-table :order-type="0" need-ctrl>
          <template slot="ctrl" slot-scope="scope">
            <el-button type="success"
                       @click="toRefund(scope.info)"
                       plain
                       size="mini">同意退款
            </el-button>
            <!--            <el-button-->
            <!--                type="danger"-->
            <!--                size="mini"-->
            <!--                @click="handleRefuseRefund(scope.info)"-->
            <!--                plain-->
            <!--            >拒绝退款-->
            <!--            </el-button>-->
          </template>
        </order-refund-table>


      </el-tab-pane>
      <el-tab-pane lazy>
        <span slot="label">课程退款申请 </span>
        <order-refund-table :order-type="1" need-ctrl>
          <template slot="ctrl" slot-scope="scope">
            <el-button type="success"
                       @click="toRefund(scope.info)"
                       plain
                       size="mini">同意退款
            </el-button>
<!--                        <el-button-->
<!--                            type="danger"-->
<!--                            size="mini"-->
<!--                            @click="handleRefuseRefund(scope.info)"-->
<!--                            plain-->
<!--                        >拒绝退款-->
<!--                        </el-button>-->
          </template>
        </order-refund-table>

      </el-tab-pane>
      <el-tab-pane lazy>
        <span slot="label">活动退款申请 </span>
        <order-refund-table :order-type="2" need-ctrl>
          <template slot="ctrl" slot-scope="scope">
            <el-button type="success"

                       @click="toRefund(scope.info)"
                       plain
                       size="mini">同意退款
            </el-button>
            <!--            <el-button-->
            <!--                type="danger"-->
            <!--                size="mini"-->
            <!--                @click="handleRefuseRefund(scope.info)"-->
            <!--                plain-->
            <!--            >拒绝退款-->
            <!--            </el-button>-->
          </template>
        </order-refund-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
        title="输入退款金额"
        :visible.sync="dialogVisible"
        width="30%"
        align="center"
    >
      <el-input-number v-model="refundAmount"
                       style="width: 100%"
                       :min="0"
                       :max="shouldAmount"
                       type="textarea"
                       placeholder="请指定退款金额"/>
      <p slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAgreeRefund(orderNumber,refundAmount)">确 定</el-button>
      </p>
    </el-dialog>
  </div>
</template>
<script>

import orderRefundTable from "@/views/orderManager/components/orderRefundTable";

export default {
  components: { orderRefundTable },
  data () {
    return {
      dialogVisible: false,
      refundAmount: "",
      orderNumber: null,
      shouldAmount: null,
    };
  },
  mounted () {
  },
  watch: {},
  methods: {
    async handleAgreeRefund (orderNumber, refundAmount) {

      const params = {
        orderNumber,
        refundAmount:refundAmount,
      };
      const res = await this.$http.orderRefund(params);
      if (res.code !== 0) return null;
      this.dialogVisible = false;
      let self = this;
      setTimeout(() => self.router.go(0), 1000);
    },

    toRefund (info) {
      this.orderNumber = info.orderNumber;
      this.shouldAmount = info.orderAmount;
      this.refundAmount = info.orderAmount;

      this.dialogVisible = true;
    },
    handleRefuseRefund () {
      this.dialogVisible = true;

    },
    handleConfirmRefuse () {
      this.dialogVisible = false;

    },
  },
};
</script>

